<template>
	<scroll-view scroll-y="true" :style="{height:height}" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="scrolltolower">
		<view class="bg" :style="'background:' + 'url(' + $util.img(bgurl) + ') no-repeat 0 0/100%'">
			<scroll-view scroll-with-animation class="diyIndex" scroll-x="true" :scroll-into-view="'a' + pageIndex" :style="{ background: value.backgroundColor ? value.backgroundColor : '' }">
				<view
					class="item"
					:id="'a' + index"
					v-for="(item, index) in cateList"
					:key="index"
					@click="changePageIndex(index)"
					
				>
					<text class="text-con" :class="index == pageIndex ? 'active' : ''" :style="{ color: index == pageIndex ? value.selectColor : value.nsSelectColor }">
						{{ item.short_name ? item.short_name : item.category_name }}
					</text>
					<view class="ns-ba-color" v-if="index == pageIndex" :style="{ background: value.selectColor }"></view>
				</view>
			</scroll-view>
			<view class="index-page-content" >
				<block v-if="pageIndex == 0">
					<slot></slot>
				</block>
				<block v-else>
					<view class="index-category-box">
						<!-- 二级分类 -->
						<view class="twoCategorylist" v-if="twoCategorylist!='undefined' && twoCategorylist && twoCategorylist.length > 0">
							<view class="twoCategory min" v-if="twoCategorylist.length <= 5">
								<view class="twoCategory-page">
									<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
										<view class="item-box">
											<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"></image>
											<image :src="$util.getDefaultImage().default_goods_img" v-else mode="aspectFill"></image>
											<view>{{ item.category_name }}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="twoCategory base" v-if="twoCategorylist.length > 5 && twoCategorylist.length <= 10">
								<view class="twoCategory-page">
									<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
										<view class="item-box">
											<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"></image>
											<image :src="$util.getDefaultImage().default_goods_img" v-else mode="aspectFill"></image>
											<view>{{ item.category_name }}</view>
										</view>
									</view>
								</view>
							</view>
							<swiper class="twoCategory big" :duration="500" v-if="twoCategorylist.length > 10" @change="swiperTocategoryChange">
								<swiper-item class="twoCategory-page" v-for="page in maxPage" :key="page">
									<view
										class="swiper-item"
										v-for="(item, index) in twoCategorylist"
										:key="index"
										v-if="index >= page * 10 && index < (page + 1) * 10"
										@click="toCateGoodsList(item.category_id_2, 2)"
									>
										<view class="item-box">
											<image :src="item.image" mode="aspectFill"></image>
											<view>{{ item.category_name }}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="dot-box">
								<view class="dot-item" v-for="page in maxPage" v-if="maxPage > 1" :key="page" :class="twoCategorylistId == page ? 'active ns-bg-color' : ''"></view>
							</view>
						</view>
			
						<!-- 分类广告 -->
						<image class="category_adv ns-margin" v-if="cateList[pageIndex].image_adv" :src="$util.img(cateList[pageIndex].image_adv)" mode="widthFix"></image>
			
						<view class="category-goods"><ns-goods-item-row :value="goodsList[pageIndex].list" @toDetail="toDetail"></ns-goods-item-row></view>
						<view class="blockView"></view>
						<view class="loading" v-if="isloading"><ns-loading ref="loading"></ns-loading></view>
					</view>
				</block>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import nsGoodsItemRow from '@/components/ns-goods-item/ns-goods-item-row.vue';
import nsLoading from '@/components/ns-loading/ns-loading.vue';
export default {
	props: {
		siteId: {
			type: [Number, String],
			default: 0
		},
		Bulge: {
			type: Boolean
		},
		value: {
			type: Object
		},
		height:{
			type: String
		},
		bgurl:{
			type: String
		}
	},
	components: {
		nsGoodsItemRow,
		nsLoading
	},
	data() {
		return {
			pageIndex: 0, //当前选中分类id
			cateList: [
				{
					//header分类
					category_name: '首页'
				}
			],
			twoCategorylist: [], //二级分类
			twoCategorylistId: 0, //二级分类所在的swiper
			goodsList: {},
			scrollTop: 0,
			scrollTopCopy: 0,
			isloading: true,

			defaultImage: this.$util.getDefaultImage().default_goods_img
		};
	},
	created() {
		this.getCategoryList();
	},
	computed: {
		maxPage() {
			let num = 0;
			if (this.twoCategorylist && this.twoCategorylist.length) {
				num = Math.ceil(this.twoCategorylist.length / 10);
			}
			return num;
		}
	},
	methods: {
		//请求分类列表
		getCategoryList() {
			let url = '/api/goodscategory/tree';
			let data = {
				level: 3,
				template: 2
			};
			if (this.siteId) {
				data.site_id = this.siteId;
				url = '/api/shopgoodscategory/tree';
			}
			this.$api.sendRequest({
				url: url,
				data: data,
				success: res => {
					if (res.code >= 0) {
						let arr = [];
						let obj = {};
						obj.category_name = this.value.title;
						arr.push(obj);
						this.cateList = arr.concat(res.data);
						Object.keys(this.cateList).forEach((key, index) => {
							this.goodsList[key] = {
								page: 1,
								list: [],
								isAll: false
							};
						});
						this.twoCategorylist = this.cateList[this.pageIndex].child_list;
					}
				}
			});
		},

		//修改当前页面id
		changePageIndex(e) {
			this.pageIndex = e;
			if (e == 0) return;
			this.twoCategorylist = this.cateList[this.pageIndex].child_list;
			if(this.cateList[this.pageIndex].child_list){
				this.twoCategorylist = this.cateList[this.pageIndex].child_list;
				this.twoCategorylist.forEach(v => {
					if (v.image) {
						v.image = this.$util.img(v.image);
					} else {
						v.image = this.$util.getDefaultImage().default_goods_img;
					}
				});
			}else{
				this.twoCategorylist=false
			}
			let id = e;
			if (this.goodsList[id] && this.goodsList[id].length) return;
			this.scrollTop = this.scrollTopCopy;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.getGoodsList();
		},

		//swiper  监听变化
		swiperChange(e) {
			this.changePageIndex(e.detail.current);
		},

		//监听二级分类  页面切换
		swiperTocategoryChange(e) {
			this.twoCategorylistId = e.detail.current;
		},

		toDetail(item) {
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: item.sku_id
			});
		},

		scroll(e) {
			this.scrollTopCopy = e.detail.scrollTop;
		},

		getGoodsList() {
			let id = this.pageIndex;
			var data = {
				page: this.goodsList[id].page,
				page_size: 10,
				site_id: this.siteId
			};
			data.category_id = this.cateList[this.pageIndex].category_id_1;
			data.category_level = 1;
			this.$api.sendRequest({
				url: '/api/goodssku/page',
				data: data,
				success: res => {
					this.isloading = false;
					if (res.code == 0 && res.data) {
						this.goodsList[id].list = this.goodsList[id].list.concat(res.data.list);
						if (this.goodsList[id].list.length == res.data.count) {
							this.goodsList[id].isAll = true;
						}
						this.goodsList[id].page += 1;
					}
					this.$forceUpdate();
				}
			});
		},

		//滚动到底部
		scrolltolower() {
			let id = this.pageIndex;
			if (this.goodsList[id].isAll) return;
			this.isloading = true;
			this.getGoodsList();
		},
		toCateGoodsList(e, f) {
			this.$util.redirectTo('/pages/goods/list/list', { category_id: e, category_level: f });
		}
	}
};
</script>

<style lang="scss">
.bg{
	width: 100%;
	height: 100%;
}
.blockView{
	width: 100%;
	height: 30px;
}
.diyIndex {
	width: 100%;
	height: 100rpx;
	white-space: nowrap;
	padding: 0 20rpx;
	box-sizing: border-box;
	.item {
		padding: 0 20rpx;
		display: inline-block;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		position: relative;
		.text-con.active {
			font-size: 34rpx;
			font-weight: 600;
		}
		view {
			width: calc(100% - 50rpx);
			height: 5rpx;
			border-radius: 5rpx;
			position: absolute;
			left: 26rpx;
			bottom: 25rpx;
		}
	}
}
.index-page-box {
	width: 100%;
	height: calc(100vh - 144px);
}
.index-page-content {
	width: 100%;
	height: calc(100vh - 144px);
}

.page-content {
}
.index-category-box.active {
	padding-bottom: 80px;
	padding-bottom: calc(80px + constant(safe-area-inset-bottom));
	padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.index-category-box {
	width: 100%;
	padding-bottom: 55px;
	padding-bottom: calc(55px + constant(safe-area-inset-bottom));
	padding-bottom: calc(55px + env(safe-area-inset-bottom));
	.twoCategorylist {
		position: relative;
	}
	.twoCategory.min {
		height: 160rpx;
	}
	.twoCategory.big{
		height: 340rpx;
	}
	.twoCategory {
		width: calc(100% - 40rpx);
		background: #ffffff;
		margin: 0 auto;
		border-radius: 15rpx;
		overflow: hidden;
		margin-top: 20rpx;
		.twoCategory-page {
			width: 100%;
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;
		}
		.swiper-item {
			width: 122rpx;
			height: 120rpx;
			display: inline-block;
			margin-right: 15rpx;
			overflow: hidden;
			.item-box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				image {
					width: 88rpx;
					height: 88rpx;
					// border-radius: 50%;
				}
				view {
					width: 100%;
					font-size: 22rpx;
					line-height: 1;
					margin-top: 15rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-align: center;
				}
			}
		}
		.swiper-item:nth-child(5n) {
			margin-right: 0;
		}
		.swiper-item:nth-child(10n + 6) {
			margin-top: 15rpx;
		}
	}
	.dot-box {
		width: calc(100% - 40rpx);
		height: 50rpx;
		position: absolute;
		bottom: 0rpx;
		left: 20rpx;
		background: rgba($color: #000000, $alpha: 0);
		display: flex;
		justify-content: center;
		align-items: center;
		.dot-item {
			width: 12rpx;
			height: 12rpx;
			background: #cccccc;
			border-radius: 6rpx;
			margin-right: 10rpx;
		}
		.dot-item.active {
			width: 24rpx;
		}
	}

	.category_adv {
		width: calc(100% - 40rpx);
		margin-bottom: 0;
		border-radius: 15rpx;
	}

	.category-goods {
		width: 100%;
	}
}
.loading {
	width: 100%;
	height: 50rpx;
}
</style>
